<template>
  <div id="peopleChose">
    <div class="half-container">
      <div class="nav-bar">
        <span>{{ leftTitle }}</span>
      </div>
      <van-tree-select
        :items="itemsOrigin"
        :main-active-index.sync="activeIndex"
        @click-item="chooseMethod"
        height="350">
        <template slot="content">
          <van-radio-group v-if="radio" v-model="radio">
            <van-cell
              v-for="(item,i) in tempList"
              :key="`${i}人员选择组件`"
              :title="item.name" 
              clickable 
              :class="item.choosed?'van-cell__title--active':''" 
              :border="false"
              @click="!isName?radio = item.id:radio = item.name">
              <van-radio slot="right-icon" :name="!isName?item.id:item.name"/>
            </van-cell>
          </van-radio-group>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    props:{
      leftTitle:{
        type: String,
        default: "选择人员"
      },
      items: {
        type: Array,
        required: true
      },
      checked: {
        type: String,
        required: true,
      },
      // 是名字或id
      isName: {
        type: Boolean,
        required: true,
        default: false
      }
    },
    data() {
      return {
        activeIndex: 0,
        radio:'',
        tempList:[],//当前左侧列表下的右侧数据
        itemsOrigin: null, // 初始内容的deepCopy
      }
    },
    created() {
    },
    activated() {
    },
    mounted() {// 设置初始选中
      if(this.checked != '') {
        this.radio = this.checked;
      }else {
        this.radio = '0';
      }
      this.itemsOrigin = this.$common.deepCopy(this.items)
      this.itemsOrigin.forEach(item => {
        // item.info = item.children.length || ''
        item.children.forEach(child => {
          if(!this.isName) {
            if(this.checked == child.id) {
              child.choosed = true
            }
          }else {
            if(this.checked == child.name) {
              child.choosed = true
            }
          }
        })
      })
      this.tempList = this.itemsOrigin[0].children
    },
    watch:{
      'items': {
        handler(newV, oldV) {
          // console.log(newV)
        }, 
        deep: true
      },
      'checked':{
        handler(newV, oldV) {
          // console.log(newV)
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              child.choosed = false
            })
          })
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              if(!this.isName) {
                if(this.checked == child.id) {
                  child.choosed = true
                }
              }else {
                if(this.checked == child.name) {
                  child.choosed = true
                }
              }
            })
          })
        }
      },
      'activeIndex': {
        handler(newV, oldV) {
          this.tempList = this.itemsOrigin[newV].children
        }, 
        deep: true
      },
      'radio': {
        handler(newV, oldV) {
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              child.choosed = false
            })
          })
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              if(!this.isName) {
                if(newV == child.id) {
                  child.choosed = true
                }
              }else{
                if(newV == child.name) {
                  child.choosed = true
                }
              }
              
            })
          })
        }
      }
    },
    methods:{
      /**
       * 选择事件
       * @return {[type]} [description]
       */
      chooseMethod(){

      },
      /**
       * 底部的确认
       * @return {[type]} [description]
       */
      confirmChose() {
        //当前为单选
        let pickerData = null
        this.tempList.forEach((item,index) => {
          if(!this.isName) {
            if(item.id == this.radio){
              pickerData =  item
            }
          }else {
            if(item.name == this.radio){
              pickerData =  item
            }
          }
        })
        return pickerData
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .half-container {
    position: relative;
  }
  .nav-bar{
    width: calc(100vw - 30px);
    color: #333333;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 15px;
    font-size: 17px;
    z-index: 5;

    span{
      font-weight: bold;
    }
  }
  .van-nav-bar__text {
    color: #333333;
  }
  .bottom-btn {
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding: 3px 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px)
  }
  .padding-t-47 {
    padding-top: 47px;
  }
  .van-cell__title--active {
    color: #2E79FF
  }
</style>
<style type="text/css" lang="less">
  #peopleChose {
    .van-tree-select {
      font-size: 17px;
      .van-tree-select__nav {
        
      }
      .van-tree-select__content {
      }
    }
    .default-class {
      border: none;
      color: #1989fa;
    }
    .info-class {
      border-radius: 5px!important;
    }
    .van-sidebar-item--select{
      border-color: #2E79FF;
    }
    .van-tree-select__item--active{
      color: #2E79FF;
    }
    .van-nav-bar__left {
      .van-nav-bar__text {
        font-weight: bold;
      }
    }
    .van-nav-bar__right {
      height: 47px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      color: #333333;

      .van-checkbox__icon .van-icon{
        width: 20px;
        height: 20px;
      }
    }
    .van-sidebar-item {
      line-height: 26px;
    }
    .van-cell {
      line-height: 30px;
    }
  }
</style>